<template>
  <div>
    <el-card class="box-card" shadow="hover">
      <div slot="header" class="clearfix">
        <h1>{{msg.title}}</h1>
        <div class="view">
          <el-button  type="danger" icon="el-icon-delete" size="mini" circle @click="deleteArticle(msg.id)"></el-button>
        </div>
        <div class="view" >
           <el-button type="primary" icon="el-icon-edit" size="mini" circle @click="goUpdate(msg.id)"></el-button>
        </div>

        <div class="view"><i class="el-icon-chat-dot-round"></i>{{msg.countComment}}</div>
        <div class="view"><i class="el-icon-view"></i>{{msg.countView}}</div>
      </div>


      <el-collapse v-model="activeNames" >


        <el-collapse-item  name="1">
          <div  @click="goDetail(msg.id)">
          <div  >
            {{msg.content.substring(0,80)}}
          </div>
          <div>
            {{msg.content.substring(81,161)}}
          </div>
        </div>
          <div class="view" v-for="item in msg.tags" :key="item.id"><el-tag>{{item.tagName}}</el-tag></div>
        </el-collapse-item>


      </el-collapse>
    </el-card>
  </div>
</template>

<script>
import {deleteArticleById} from '@/api/article'
export default {
  props:['msg'],
  data() {
    return {
      activeNames: ["1"],
    };
  },
  mounted () {
    
  },
  methods: {
    goDetail(id) {
  
      this.$router.push({
        name:'article',
        query:{'id':id}
      });
    },
    goUpdate(id){
      this.$router.push({
        name:'createArticle',
        query:{
          'id':id
        }
      })
      // findArticleById(id).then(res=>{
      //   console.log(res.data);
      // })
    },
    deleteArticle(id){
      this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteArticleById(id).then(res=>{
            
            if(!res.success){
              return this.$message.error('删除失败')
            }
            this.$message({
            type: 'success',
            message: '删除成功!'
          
          });
          location.reload()
          })
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    }
  }
};
</script>

<style scoped lang="less">
.clearfix{
  margin-bottom: 15px;
}


/deep/.el-collapse-item__header.is-active{
  font-weight: bold;
  font-size: 15px;
}

.text {
  font-size: 14px;
}

.item {
  padding: 10px;
}

.box-card {
  /* width: 800px; */

  line-height: 0;
  /* margin-left: 0px; */
}
.view {
  float: right;
  padding-left: 10px;
  color: #909399;
}
</style>